<template>
    <div class="mine">
        <div class="nav">
            <span>我的</span><span><i class="iconfont icon-gonggao"></i><i class="iconfont icon-shezhi"></i></span>
        </div>
        <dl>
            <dt><img src="../assets/image/tou.png" alt=""></dt>
            <router-link tag="dd" to="/dly">
                <h3>立即登录</h3>
                <p>登录后可享受更多特权<span class="iconfont icon-right-"></span></p>
            </router-link>
        </dl>
        <div class="content">
            <ul class="ul_top">
                <li><span><img src="../assets/image/qianbao.png" alt=""></span><br>钱包</li>
                <li><span><img src="../assets/image/hongbao.png" alt=""></span><br>红包</li>
                <li><span><img src="../assets/image/jinbi.png" alt=""></span><br>金币</li>
            </ul>
            <ul class="ul_list">
                <li><span><img src="../assets/image/dizhi.png" alt=""></span>收货地址</li>
                <li><span><img src="../assets/image/sceng.png" alt=""></span>我的收藏</li>
                <li><span><img src="../assets/image/jinbi.png" alt=""></span>金币商城</li>
                <li><span><img src="../assets/image/kefu.png" alt=""></span>我的客服</li>
                <li><span><img src="../assets/image/hy.png" alt=""></span>欢迎评分</li>
                <li><span><img src="../assets/image/jmeng.png" alt=""></span>加盟合作</li>
            </ul>
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '@/components/Footer'
export default {
    components:{
        Footer
    },
    data(){
        return{
            
        }
    }
  }
</script>

<style scoped lang="less">
.mine{
    margin-bottom: 1.5rem;
    .nav{
        display: flex;
        height: 1.3rem;
        justify-content: space-between;
        background: #009afe;
        span{
            font-size: 0.5rem;
            line-height: 1.3rem;
            padding-left: 0.3rem;
            color: #fff;
        }
        i{
            font-size: 0.5rem;
            padding: 0 0.3rem; 
            color: #fff;
        }
    }
    dl{
        display: flex;
        background: #009afe;
        padding: 0.9rem 0;
        dt{
            flex: 1;
            margin:0 0.4rem;
            width: 2.15rem;
            height: 2.15rem;
            img{
                width: 100%;
                height: 100%;
            }
        }
        dd{
            flex: 3;
            h3{
                font-size: 0.65rem;
                color: #fff;
            }
            p{
                margin-top: 0.65rem;
                font-size: 0.4rem;
                color: #fff;
                span{
                    color: #fff;
                    float: right;
                    padding-right: 0.3rem; 
                }
            }
        }
    }
    .content{
        background: #f5f5f5;
        .ul_top{
            background: #fff;
            display: flex;
            >li{
                padding:  0.5rem 0;
                text-align: center;
                flex: 1;
                font-size: 0.3rem;
                border-left: 0.01rem solid #ccc;
                &:first-child{
                    border-left: none;
                } 
                span{
                    display: block;
                    padding-left: 1.4rem; 
                    width: 0.9rem;
                    height: 0.9rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
        .ul_list{
            margin-top: 0.4rem;
            li{
                display: flex;
                background: #fff;
                height: 1.3rem;
                line-height: 1.3rem;
                font-size:  0.45rem;
                &:nth-child(3){
                    margin-top: 0.4rem;
                }
                &:nth-child(4){
                    margin-top: 0.4rem;
                }
                span{
                    width: 0.5rem;
                    height: 0.5rem;
                    display: block;
                    padding: 0 0.4rem;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
            }
        }
    }
}

</style>


